<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #f5f5f5;
      }
      h1 {
        color: #af4248;
        text-align: center;
      }
      .content {
        width: 600px;
        height: 400px;
        background: white;
        margin: 0 auto;
      }
      input {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 0;
      }
      li {
        padding: 10px;
        box-sizing: border-box;
        list-style: none;
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <h1>记事本</h1>
    <div class="content">
      <input type="text" />
      <ul>
        <!-- <li>
          <span>张三：</span>
          <span>加快速度发个快手结婚的过来看手机号</span>
          <span>2025-05-08 12:32:56</span>
          <span>X</span>
        </li>
        <li>
            <span>张三：</span>
            <span>加快速度发个快手结婚的过来看手机号</span>
            <span>2025-05-08 12:32:56</span>
            <span>X</span>
          </li>
          <li>
            <span>张三：</span>
            <span>加快速度发个快手结婚的过来看手机号</span>
            <span>2025-05-08 12:32:56</span>
            <span>X</span>
          </li>
          <li>
            <span>张三：</span>
            <span>加快速度发个快手结婚的过来看手机号</span>
            <span>2025-05-08 12:32:56</span>
            <span>X</span>
          </li> -->
      </ul>
      
    </div>

    <script>
      let arr = [
        {
          name: "张三",
          text: "加快速度发个快手结婚的过来看手机号",
          date: "2025-05-08 12:32:56",
        },
        {
          name: "张三",
          text: "加快速度发个快手结婚的过来看手机号",
          date: "2025-05-08 12:32:56",
        },
        {
          name: "张三",
          text: "加快速度发个快手结婚的过来看手机号",
          date: "2025-05-08 12:32:56",
        },
      ];
      console.log(arr);
      let ul = document.querySelector("ul");
      // 第一种 动态添加元素实现
      arr.forEach((item) => {
        // console.log(item);
        // console.log(`<li><span>${item.text}</span></li>`)
        // let li = document.createElement('li')
        // li.innerHTML = `<span>${item.text}</span>`
        // ul.appendChild(li)
        // document.querySelector('ul').innerHTML = `<li><span>${item.text}</span></li>`
      });

      // 第二种  拼接字符串实现

      function setdom() {
        let lis = "";
        arr.forEach((item, index) => {
          lis += `<li><span>${item.text}</span><span>${item.date}</span><span onclick="delarr(${index})">X</span></li>`;
        });
        ul.innerHTML = lis;
      }
      // 初始化
      setdom();

      let input = document.querySelector("input");
    //   添加
      input.onkeyup = function (e) {
        if (e.keyCode == "13") {
          let obj = {
            name: "张三",
            text: input.value,
            date: setdate(),
          };
          arr.push(obj);

          setdom();
        }
      };
    //   删除
    function delarr(index) {
        arr.splice(index,1)
        setdom()
    }

      //   // 回车添加内容
      //   let input = document.querySelector("input");
      //   input.onkeyup = function (e) {
      //     if (e.keyCode == "13") {
      //       // 写逻辑
      //       // 获取输入的内容
      //       let val = input.value;
      //       let li = document.createElement("li");
      //       li.innerHTML = `<span>张三：</span>
      //              <span>${val}</span>
      //              <span>${setdate()}</span>
      //              <span class="del">X</span>`;
      //       document.querySelector("ul").appendChild(li);
      //       //   添加删除事件
      //       let dels = document.querySelectorAll(".del");
      //       dels.forEach((item) => {
      //         item.onclick = function () {
      //           this.parentNode.remove();
      //         };
      //       });
      //     }
      //   };
      // 获取当前时间
      function setdate(params) {
        let date = new Date();
        // 获取年份
        let year = date.getFullYear();
        // 获取月份 0-11
        let minth = date.getMonth() + 1;
        // 获取日期
        let day = date.getDate();
        // 获取时
        let hh = date.getHours();
        // 获取分
        let mm = date.getMinutes();
        // 获取秒
        let ss = date.getSeconds();

        return `${year}-${minth}-${day} ${hh}:${mm}:${ss}`;
      }
    </script>
  </body>
</html>
